<template>
  <div class="news">
    <div class="news_top">
      <div class="back"><img v-on:click="back()" src="../assets/images/back.png" alt=""></div>
      <div>{{title_top}}</div>
      <div class="save"><img v-on:click="save()" src="../assets/images/save.png" alt=""></div>
    </div>
    <div class="search">
      <input maxlength="16" type="search" name=""  placeholder="标题" v-model="title" v-on:focus="focuss()">
    </div>
    <textarea v-on:focus="focuss()" name="" cols="30" rows="10" v-model="content" ></textarea>
    <!--onKeyDown='if (this.value.length>=20){event.returnValue=false}'-->
    <div class="count">{{remain}}&nbsp;/&nbsp; {{counts}}</div>
  </div>
</template>
<script>
// focus,blur
import {setStorage,getStorage,replaceall} from 'utils_c'
console.log(setStorage);
export default {
  data() {
    return {
      focusState: false,  //暂时放弃使用
      title_top: "", //顶栏标题字
      title: "",  //标签标题
      content: "",  //标签内容
      Data: [],   //存储的数据
      confirmContent: "是否保存,确认?",
      counts:10,
      remain:0,
    };
  },
  created() {
    var that = this;
    console.log(that.$route.params);
    if (that.$route.params.state == "1") {
      that.title_top = "预览";
      that.content = that.$route.params.content;
      that.title = that.$route.params.title;
    } else {
      that.title_top = "新标签";
    }
    mui.back = function(){
    }
  },
  methods: {
    WordCount(e){
      console.log(e);
      if(this.content.length > 10){
        this.content = this.content.slice(0,this.counts);
        console.log('阿斯蒂芬:');
        e.returnValue=false;
      }else{
        this.remain = this.content.length;
      }
      console.log(this.content.length);
    },
    focuss() {
      this.focusState = true;
    },
    back() {
      if (
        this.title == this.$route.params.title &&
        this.content == this.$route.params.content
      ) {
        this.$router.go(-1);
        console.log("====");
      } else {
        console.log("!!======");
        this.save();
      }
    },
    save() {
      var that = this;
      var btnArray = ["取消", "放弃", "保存"];
      mui.confirm(that.confirmContent, "简易备忘录", btnArray, function(e) {
        if (e.index == 0) {
          console.log("取消");
        } else if (e.index == 1) {
          that.$router.go(-1);
          console.log("放弃");
        } else {
          that.Data = getStorage("msg")? getStorage("msg"):[];

          if (that.$route.params.state == "1") {
            that.Data = that.Data.map(function(value, index) {
              if (value.time == that.$route.params.time) {
                value = {
                  title: that.title ? that.title : "未命名",
                  content: that.content,
                  time: new Date().toLocaleString()
                };
                return value;
              } else {
                return value;
              }
            });
          } else {
          //   //新标签
            that.Data.push({
              title: that.title ? that.title : "未命名",
              content: that.content,
              time: new Date().toLocaleString()
            });
          }
          setStorage('msg',that.Data);
          that.msg = "";
          that.title = "";
          that.$router.push("/HomeView");
          console.log("保存");
        }
      });
    }
  }
};
</script>
<style scoped>
::-webkit-scrollbar {
  display: none !important;
}
.count{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding: 8px 30px;
  text-align: right;
  /*background-color:red;*/
}
.news_top {
  display: flex;
  justify-content: space-between;
  color: #333;
  padding: 8px 12px;
  background-color: rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
}
.news_top img {
  width: 20px;
  height: 20px;
}
textarea {
  width: calc(100% - 36px);
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 36px;
  top: 100px;
  font-size: 16px;
  line-height: 2;
  font-family: "微软雅黑", "宋体";
}

.search {
  display: flex;
  position: relative;
  /* padding-bottom: 15px; */
}
.search input {
  /* border: none; */
  width: 100%;
  padding: 18px 5px;
  margin: 0 18px;
  font-size: 18px;
  border-bottom: 1px solid rgb(179, 170, 170);
  box-sizing: content-box;
  height: auto;
  text-align: left;
  border-radius: 0;
  background-color: transparent;
}

/* 修改input的颜色 */
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #ccc9c9;
  opacity: 1;
  font-size: 18px;
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #ccc9c9;
  opacity: 1;
  font-size: 18px;
}

input:-ms-input-placeholder {
  color: #ccc9c9;
  opacity: 1;
  font-size: 18px;
}

input::-webkit-input-placeholder {
  color: #ccc9c9;
  opacity: 1;
  font-size: 18px;
  font-weight: 900;
}
</style>


